import React, { useState } from "react";
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
} from "antd-mobile";
import {regist}from '../../api/regist'
import "./index.css";
import msg from "./msg.png";
let password = null;
export default function VerifyCode(props) {
  const [isShow, setIsShow] = useState(true)
  const [isPassword, setIspassword] = useState(true)

  // 设置密码
  function setPasswordHandle(val) {
    password = val.trim()
    setIspassword(!/^[\w]{8,20}$/.test(password));

  }
  return (
    <div className="wrap">
      <NavBar
        mode="light"
        icon={<Icon type="left" color="#000" />}
        onLeftClick={() => props.history.push("/login")}
      >
        硅谷注册
      </NavBar>
      <WhiteSpace size="lg"></WhiteSpace>

      <WingBlank size="lg">
        <div className="img">
          <img src={msg} alt="" />
        </div>
        <WhiteSpace size="lg"></WhiteSpace>
        <WingBlank size="lg">
          <div className="tip">请设置登录密码</div>
        </WingBlank>
        <WhiteSpace size="lg"></WhiteSpace>

        <div className="code">
          <InputItem
            className="psw"
            type={isShow ? "password" : "text"}
            clear
            placeholder="请设置8~20位登录密码"
            extra={
              <span
                className={
                  isShow
                    ? "iconfont icon-close-eye eye"
                    : "iconfont icon-yanjing eye"
                }
                onClick={() => setIsShow(!isShow)}
              ></span>
            }
            onChange={setPasswordHandle}
          ></InputItem>
        </div>
        <WingBlank size="lg">
          <div>
            密码由8-20位字母、数字或半角符号组成，不能是10位以下纯数字/字母/半角符号，字母需区分大小写
          </div>
        </WingBlank>
        <WingBlank size="lg">
          <Button className="code-next" type="warning" disabled={isPassword} onClick={
           async () => {
             const phone = localStorage.getItem("phone");
             const result = await regist(phone, password);
             console.log(result);
             console.log(result.statusText);
             if (result.statusText === "OK") {
               console.log(111);
               props.history.push("/Home");
             }
           }
          }>
            完成
          </Button>
        </WingBlank>
        <WingBlank size="lg">
          遇到问题了?
          <a href="">请联系客服</a>
        </WingBlank>
      </WingBlank>
    </div>
  );
}
